<template>
  <div style="padding: 20px">
    <!-- 添加按钮 -->
    <el-form>
      <el-form-item label="权限列表" style="margin-bottom: 10px">
      </el-form-item>
    </el-form>
    <!-- table表格：展示用户信息的地方 -->
    <el-table
      :header-cell-style="{ background: '#ececf1', color: '#636870' }"
      border
      style="width: 100%"
      :data="roleList"
    >
      <el-table-column
        label="序号"
        width="80"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="rolename"
        label="角色"
        width="150"
      />
      <el-table-column align="center" prop="rolepage" label="权限" key="col">
      </el-table-column>
      <el-table-column label="操作" width="230" align="center" key="column">
        <template slot-scope="{ row }">
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-edit"
            title="修改权限"
            :disabled="row.rolename==='超级管理员'"
            @click="updateRoleBtn(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 :before-close="dialogBeforeClose" -->
    <el-dialog
      title="修改权限"
      :visible.sync="dialogFormVisible"
      width="width"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          prop="rolename"
          label="角色"
          :label-width="formLabelWidth"
        >
          <el-input
            :disabled="true"
            v-model.trim="form.rolename"
            placeholder="请输入权限名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="页面权限" :label-width="formLabelWidth">
          <el-checkbox-group v-if="form.rolepage" v-model="form.rolepage">
            <el-checkbox disabled label="数据总览"></el-checkbox>
            <el-checkbox label="学生管理"></el-checkbox>
            <el-checkbox label="成绩管理"></el-checkbox>
            <el-checkbox label="考试管理"></el-checkbox>
            <el-checkbox label="班级管理"></el-checkbox>
            <el-checkbox label="教师管理"></el-checkbox>
            <el-checkbox label="学院管理"></el-checkbox>
            <el-checkbox label="专业管理"></el-checkbox>
            <el-checkbox label="学生档案"></el-checkbox>
            <el-checkbox label="修改密码"></el-checkbox>
            <el-checkbox label="权限管理"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          style="background-color: white; border-color: #586cb1; color: #586cb1"
          @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button
          style="color: #fff; background-color: #586cb1; border-color: #586cb1"
          @click="submit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import roleApi from "@/api/role";

export default {
  name: "Adminrole",
  data() {
    return {
      roleList: [],
      form: {
        rolename: "",
        rolepage: [],
      },
      // 控制表单宽度
      formLabelWidth: "100px",
      // 控制添加用户对话框显示
      dialogFormVisible: false,
      // 表单验证
      rules: {
        rolename: [
          { required: true, message: "请输入权限名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getRoleAdmin();
  },
  methods: {
    //获取账户信息
    getRoleAdmin() {
      roleApi.getRole().then((res) => {
        this.roleList = res.data;
      });
    },
    //修改权限信息按钮
    updateRoleBtn(row) {
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.form.rolepage = this.form.rolepage.split(",");
    },
    // 提交修改权限信息
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 判断是否已经存在
          const isExist = this.roleList.some((item) => {
            return (
              item.rolename === this.form.rolename && item.id !== this.form.id
            );
          });
          if (isExist) {
            this.$message.error("权限名称已存在");
            return;
          }
          roleApi
            .updateRole(this.form)
            .then((res) => {
              this.$message.success(res.msg);
              this.dialogFormVisible = false;
              this.form = {};
              this.getRoleAdmin();
            })
            .catch();
        }
      });
    },
  },
};
</script>

<style scoped>
#container {
  padding: 20px;
}

/*
  el-table样式穿透 表格居中
*/
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
</style>